<template>
  <div class="app-container">
    <el-form class="searchWrap" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="85px">

      <el-form-item label="类型" prop="typeName">
        <el-select v-model="queryParams.typeName" placeholder="请选择类型：TP" @keyup.enter.native="handleQuery"
                   @change="tpTypeChange(queryParams.typeName)">
          <el-option
            v-for="item in tpTypeOptions"
            :key="item" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="材质" prop="typeMaterial">
        <el-select v-model="queryParams.typeMaterial" placeholder="请选择材质：A(铝)" @keyup.enter.native="handleQuery"
                   @change="tpMaterialChange(queryParams.typeMaterial)">
          <el-option
            v-for="item in tpMaterialOptions"
            :key="item" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="齿形" prop="typeToothShape">
        <el-select v-model="queryParams.typeToothShape" placeholder="请选择齿形：S5M" @keyup.enter.native="handleQuery"
                   @change="tpToothChange(queryParams.typeToothShape)">
          <el-option
            v-for="item in tpToothOptions"
            :key="item" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="isTypeBandwidth" label="带宽" prop="typeBandwidth">
        <el-select v-model="queryParams.typeBandwidth" placeholder="请选择齿形对应的带宽"
                   @keyup.enter.native="handleQuery" @change="tpBandwidthChange(queryParams.typeBandwidth)">
          <el-option
            v-for="item in tpBandwidthOptions"
            :key="item" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="齿数" prop="typeTeethNum">
        <el-select v-model="queryParams.typeTeethNum" placeholder="请选择齿数" @keyup.enter.native="handleQuery"
                   @change="tpTeethNumChange(queryParams.typeTeethNum)">
          <el-option
            v-for="item in tpTeethNumOptions"
            :key="item" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="形状" prop="typeShape">
        <el-select v-model="queryParams.typeShape" placeholder="请选择形状:A(无凸台)" @keyup.enter.native="handleQuery"
                   @change="tpShapeChange(queryParams.typeShape)">
          <el-option
            v-for="item in tpShapeOptions"
            :key="item" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="轴孔类型" prop="axleHoleType">
        <el-select v-model="queryParams.axleHoleType" placeholder="请选择轴孔类型:A(圆孔)"
                   @keyup.enter.native="handleQuery" @change="tpAxleHoleTypeChange(queryParams.axleHoleType)">
          <el-option
            v-for="item in tpAxleHoleTypeOptions"
            :key="item" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="isFormType" label="内孔直径" prop="innerBoreDiameter">
        <el-input
          v-model="queryParams.innerBoreDiameter"
          placeholder="请输入内孔直径如：d10"
          @input="innerBoreDiameterKeyup(queryParams.innerBoreDiameter)"
          style="width: 215px;"
        />
      </el-form-item>

      <el-form-item label="查询型号" prop="timingPulley">
        <el-input
          v-model="queryParams.timingPulley"
          placeholder="请选择全部的参数"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 525px;"
        />
      </el-form-item>


      <br>

      <el-form-item v-if="isFormItemVisible" prop="typeA" label-width="100px">
        <span slot="label">
          <span>带宽A</span>
      	  <span style="color: red">(必填)</span>
        </span>
        <el-input
          v-model="queryParams.typeA"
          placeholder="请输入非标带宽A数据"
          @input="typeAKeyup(queryParams.typeA)"
          style="width: 215px;"
        />
      </el-form-item>

      <el-form-item v-if="isFormItemVisible" prop="typeW" label-width="100px">
        <span slot="label">
          <span>带宽W</span>
        </span>
        <el-input
          v-model="queryParams.typeW"
          placeholder="请输入非标带宽W数据"
          @input="typeAKeyup(queryParams.typeW)"
          style="width: 215px;"
        />
      </el-form-item>

      <el-form-item v-if="isFormItemVisible" prop="typeL" label-width="100px">
        <span slot="label">
          <span>带宽L</span>
        </span>
        <el-input
          v-model="queryParams.typeL"
          placeholder="请输入非标带宽L数据"
          @input="typeAKeyup(queryParams.typeL)"
          style="width: 215px;"
        />
      </el-form-item>

      <el-form-item class="searchOprationWrap">
        <el-button type="primary" icon="el-icon-search" size="normal" @click="handleQuery">查价</el-button>
        <el-button type="danger" icon="el-icon-collection-tag" size="normal" @click="nonstandard">非标</el-button>
        <el-button icon="el-icon-refresh" size="normal" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <!--    图片预览-->
    <div class="perviewImageWrap" v-if="searchImgUrl">
      <el-image
        style="width: 100px; height: 100px"
        :src="searchImgUrl"
        :preview-src-list="searchImgUrlList">
      </el-image>
    </div>

    <p class="spliteLines"></p>
    <!--    <el-table v-loading="loading" :data="timingPulleyPrice">-->
    <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button-->
    <!--            size="mini"-->
    <!--            type="text"-->
    <!--            icon="el-icon-edit"-->
    <!--            @click="handleUpdate(scope.row)"-->
    <!--            v-hasPermi="['hualian:type:edit']"-->
    <!--          >详情</el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->


    <el-descriptions title="价格信息" class="priceTable" border :colon="false"
                     :column="3"
    >

      <el-descriptions-item label="料件成本" span="3">{{
          '￥' + timingPulleyPricePrice.materialsPartsCost
        }}
      </el-descriptions-item>
      <el-descriptions-item label="加工成本" span="3">{{  '￥' + timingPulleyPricePrice.processCost }}</el-descriptions-item>
      <el-descriptions-item label="合计成本" span="3">{{  '￥' + timingPulleyPricePrice.assessCost }}</el-descriptions-item>

      <!--  TODO: 额外成本 字段需要重新对接-->
      <el-descriptions-item label="额外成本" span="3">{{  '￥' + timingPulleyPricePrice.assessCost }}</el-descriptions-item>

      <!--      <el-descriptions-item label="改孔费用">{{ timingPulleyPricePrice.holeModificationCost }}</el-descriptions-item>-->
      <!--      <el-descriptions-item label="       "></el-descriptions-item>-->
      <!--      <el-descriptions-item label="       "></el-descriptions-item>-->

      <!--      <el-descriptions-item label="零售价">{{ timingPulleyPricePrice.retailPrice }}</el-descriptions-item>-->
      <!--      <el-descriptions-item label="含税零售价">{{ timingPulleyPricePrice.taxRetailPrice }}</el-descriptions-item>-->
      <!--      <el-descriptions-item label="       "></el-descriptions-item>-->

      <el-descriptions-item label="1件">
      </el-descriptions-item>
      <el-descriptions-item label="未税">{{
          timingPulleyPricePrice.num1 ? '￥' + timingPulleyPricePrice.num1 : '--'
        }}
      </el-descriptions-item>
      <el-descriptions-item label="含税">{{
          timingPulleyPricePrice.taxNum1 ? '￥' + timingPulleyPricePrice.taxNum1 : '--'
        }}
      </el-descriptions-item>

      <el-descriptions-item label="2件">
      </el-descriptions-item>
      <el-descriptions-item label="未税">{{
          timingPulleyPricePrice.num12? '￥' + timingPulleyPricePrice.num2 : '--'
        }}
      </el-descriptions-item>
      <el-descriptions-item label="含税">{{
          timingPulleyPricePrice.taxNum2 ? '￥' + timingPulleyPricePrice.taxNum2 : '--'
        }}
      </el-descriptions-item>

      <el-descriptions-item label="货期">{{
          timingPulleyPricePrice.num1 ? '￥' + timingPulleyPricePrice.num1 : '--'
        }}
      </el-descriptions-item>
    </el-descriptions>

    <!--
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item label="怡和达型号转换" prop="yiHeDaTypeCommodity">
        <el-input
          v-model="queryParams.yiHeDaTypeCommodity"
          placeholder="请选择全部的参数"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 525px;"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="yiHeDaConvert">转换</el-button>
      </el-form-item>

      <el-form-item v-if="isFormYiHeDa" prop="typeYiHeDa" label-width="120px">
        <span slot="label">
          <span>转换后的型号</span>
        </span>
        <el-input
          v-model="queryParams.yiHeDaType"
          placeholder=""
          @input="yiHeDaTypeKeyup(queryParams.yiHeDaType)"
          style="width: 300px;"
        />
      </el-form-item>

      <br>

      <el-form-item label="米思米型号转换" prop="miSiMiTypeCommodity">
        <el-input
          v-model="queryParams.miSiMiTypeCommodity"
          placeholder="请选择全部的参数"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 525px;"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="miSiMiConvert">转换</el-button>
      </el-form-item>

      <el-form-item v-if="isFormMiSiMi" prop="typeMiSiMi" label-width="120px">
        <span slot="label">
          <span>转换后的型号</span>
        </span>
        <el-input
          v-model="queryParams.miSiMiType"
          placeholder=""
          @input="miSiMiTypeKeyup(queryParams.miSiMiType)"
          style="width: 300px;"
        />
      </el-form-item>

      <br>

      <el-form-item label="爱安特型号转换" prop="aiAnTeTypeCommodity">
        <el-input
          v-model="queryParams.aiAnTeTypeCommodity"
          placeholder="请选择全部的参数"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 525px;"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="aiAnTeConvert">转换</el-button>
      </el-form-item>

      <el-form-item v-if="isFormAiAnTe" prop="typeAiAnTe" label-width="120px">
        <span slot="label">
          <span>转换后的型号</span>
        </span>
        <el-input
          v-model="queryParams.aiAnTeType"
          placeholder=""
          @input="aiAnTeTypeKeyup(queryParams.aiAnTeType)"
          style="width: 300px;"
        />
      </el-form-item>

      <br>

      <el-form-item label="上隆型号转换" prop="shangLongTypeCommodity">
        <el-input
          v-model="queryParams.shangLongTypeCommodity"
          placeholder="请选择全部的参数"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 525px;"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="shangLongConvert">转换</el-button>
      </el-form-item>

      <el-form-item v-if="isFormShangLong" prop="typeShangLong" label-width="120px">
        <span slot="label">
          <span>转换后的型号</span>
        </span>
        <el-input
          v-model="queryParams.shangLongType"
          placeholder=""
          @input="shangLongTypeKeyup(queryParams.shangLongType)"
          style="width: 300px;"
        />
      </el-form-item>

    </el-form>
      -->

    <p class="spliteLines"></p>

    <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" v-show="showSearch" label-width="120px">

      <p class="customTitle">型号转换</p>
      <div class="customFormGroup">
        <el-form-item label="输入型号" prop="yiHeDaTypeCommodity">
          <el-input
            v-model="queryParams.AllTypeCommodity"
            placeholder="请选择全部的参数"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 500px;"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh" size="medium" @click="transFormSkuNum">转换</el-button>
        </el-form-item>

        <el-form-item v-if="isTransForm" label-width="120px">
        <span slot="label">
          <span>转换后的型号</span>
        </span>
          <el-input
            v-model="queryParams.afterTransformValue"
            placeholder=""
            clearable
            style="width: 500px;"
          />
        </el-form-item>
      </div>

    </el-form>

    <p class="spliteLines"></p>
    <p class="customTitle bossTitle">联系方式</p>
    <el-descriptions border :colon="false" :column="1" class="userDescription">
      <el-descriptions-item label="联系人">张先生</el-descriptions-item>

      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>

      <el-descriptions-item label="微信二维码">
        <el-image
          style="width: 120px; height: 120px"
          :src="require(`@/assets/images/A1.png`)"
          :fit="fit"></el-image>
      </el-descriptions-item>

    </el-descriptions>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTimingPulleyCostPrice"
    />

    <!-- 添加或修改同步轮对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body style="margin-top: 20px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="型号类型" prop="typeName">
          <el-input v-model="form.typeName" placeholder="请输入型号类型"/>
        </el-form-item>
        <el-form-item label="型号材质" prop="typeMaterial">
          <el-input v-model="form.typeMaterial" placeholder="请输入型号材质"/>
        </el-form-item>
        <el-form-item label="型号齿形" prop="typeToothShape">
          <el-input v-model="form.typeToothShape" placeholder="请输入型号齿形"/>
        </el-form-item>
        <el-form-item label="型号带宽" prop="typeBandwidth">
          <el-input v-model="form.typeBandwidth" placeholder="请输入型号带宽"/>
        </el-form-item>
        <el-form-item label="型号齿数" prop="typeTeethNum">
          <el-input v-model="form.typeTeethNum" placeholder="请输入型号齿数"/>
        </el-form-item>
        <el-form-item label="型号形状" prop="typeShape">
          <el-input v-model="form.typeShape" placeholder="请输入型号形状"/>
        </el-form-item>
        <el-form-item label="轴孔类型" prop="axleHoleType">
          <el-input v-model="form.axleHoleType" placeholder="请输入轴孔类型"/>
        </el-form-item>
        <el-form-item label="内孔直径" prop="innerBoreDiameter">
          <el-input v-model="form.innerBoreDiameter" placeholder="请输入内孔直径"/>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>

import {
  listType,
  getType,
  delType,
  addType,
  updateType,
  getTpTypeList,
  getTpMaterialList,
  getTpToothList,
  getTpBandwidthList,
  getTpTeethNumList,
  getTpShapeList,
  getTpAxleHoleTypeList,
  getTpCostPrice,
  getYiHeDaTypeConvertWebsite,
  getMiSiMiTypeConvertWebsite,
  getAiAnTeTypeConvertWebsite,
  getShangLongTypeConvertWebsite,
  GetTransFormSkuNumByValue,
} from "@/api/hualian/type";
import data from "@/views/system/dict/data.vue";

export default {
  name: "Type",
  data() {
    return {
      searchImgUrl: '',//图片路径
      searchImgUrlList: [],//预览图片路径
      // 同步轮类型
      tpTypeOptions: [],
      // 选择的同步轮类型
      chooseTpType: '',
      // 同步轮材质
      tpMaterialOptions: [],
      // 选择的同步轮材质
      chooseTpMaterial: '',
      // 同步轮齿形
      tpToothOptions: [],
      // 选择的同步轮齿形
      chooseTpTooth: '',
      // 同步轮带宽
      tpBandwidthOptions: [],
      // 选择的同步轮带宽
      chooseTpBandwidth: '',
      // 同步轮齿数
      tpTeethNumOptions: [],
      // 选择的同步轮齿数
      chooseTpTeethNum: '',
      // 同步轮形状
      tpShapeOptions: [],
      // 选择的同步轮形状
      chooseTpShape: '',
      // 同步轮轴孔类型
      tpAxleHoleTypeOptions: [],
      // 选择的同步轮轴孔类型
      chooseTpAxleHoleType: '',
      // 内孔直径文本框的值
      tpInnerBoreDiameter: '',
      // 所要进行搜索同步轮的全称
      timingPulleyFullName: '',
      // 隐藏非标
      isFormItemVisible: false,
      isTypeBandwidth: true,
      isFormYiHeDa: false,
      isFormMiSiMi: false,
      isFormAiAnTe: false,
      isFormShangLong: false,
      isFormType: true,

      isTransForm: false,

      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 同步轮价格数据数据
      timingPulleyPrice: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        typeName: null,
        typeMaterial: null,
        typeToothShape: null,
        typeBandwidth: null,
        typeTeethNum: null,
        typeShape: null,
        axleHoleType: null,
        innerBoreDiameter: 'd',
        timingPulley: null,
        typeA: '',
        typeW: null,
        typeL: null,
        yiHeDaTypeCommodity: '',
        yiHeDaType: null,
        miSiMiTypeCommodity: '',
        miSiMiType: null,
        aiAnTeTypeCommodity: '',
        aiAnTeType: null,
        shangLongTypeCommodity: '',
        shangLongType: null,
        AllTypeCommodity: '',
        afterTransformValue: ''
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        typeName: [
          {required: true, message: "型号类型不能为空", trigger: "blur"}
        ],
        typeMaterial: [
          {required: true, message: "型号材质不能为空", trigger: "blur"}
        ],
        typeToothShape: [
          {required: true, message: "型号齿形不能为空", trigger: "blur"}
        ],
        typeBandwidth: [
          {required: true, message: "型号带宽不能为空", trigger: "blur"}
        ],
        typeTeethNum: [
          {required: true, message: "型号齿数不能为空", trigger: "blur"}
        ],
        typeShape: [
          {required: true, message: "型号形状不能为空", trigger: "blur"}
        ],
        axleHoleType: [
          {required: true, message: "轴孔类型不能为空", trigger: "blur"}
        ],
        innerBoreDiameter: [
          {required: true, message: "内孔直径不能为空", trigger: "blur"}
        ]
      },
      timingPulleyPricePrice: {},
      LS: {
        color: '#C03639',
      },
    };
  },
  created() {
    this.tpTypeList();
    this.tpMaterialList();
    this.tpToothList();
    this.tpShapeList();
  },
  methods: {

    /** 查询华链同步轮及相关产品成本和利润 */
    getTimingPulleyCostPrice(data) {
      let _this = this;
      getTpCostPrice(data).then(response => {
        this.timingPulleyPrice = [response.data];
        console.log("同步轮价格数据详情", response.data)
        this.timingPulleyPricePrice = response.data;

        // 获取图片 名称,并拼接路径
        let targetImgName = response.searchImageName;
        targetImgName = 'A1';
        _this.searchImgUrl = require(`@/assets/images/${targetImgName}.png`);
        _this.searchImgUrlList = [require(`@/assets/images/${targetImgName}.png`)];

      });
    },

    /** 查询同步轮类型集合 */
    tpTypeList() {
      getTpTypeList(this.queryParams).then(response => {
        this.tpTypeOptions = response.data;
      });
    },
    /** 选择的同步轮类型 */
    tpTypeChange(tpType) {
      console.log('选择的同步轮类型:', tpType); // 在控制台输出选择的值
      this.chooseTpType = tpType;

      if (this.chooseTpType === 'TP') {
        this.isFormType = true;
      } else if (this.chooseTpType === 'IG') {
        this.isFormType = false;
      }

      // 假设齿数下拉框有值，清空它
      this.tpTeethNumOptions = []; // 清空带宽选项
      this.queryParams.typeTeethNum = ''; // 清空带宽值

      // 查询对应的齿数集合
      this.tpTeethNumList()

      this.timingPulleyFullNameMethod();

      this.tpToothList(tpType);
      this.tpShapeList(tpType);
    },
    /** 查询同步轮材质集合 */
    tpMaterialList() {
      getTpMaterialList(this.queryParams).then(response => {
        this.tpMaterialOptions = response.data;
      });
    },
    /** 选择的同步轮材质 */
    tpMaterialChange(tpMaterial) {
      console.log('选择的同步轮材质:', tpMaterial); // 在控制台输出选择的值
      this.chooseTpMaterial = tpMaterial;
      // 查询对应的齿数集合
      this.tpTeethNumList()

      this.timingPulleyFullNameMethod();
    },
    /** 查询同步轮齿形集合 */
    tpToothList(tpType) {
      getTpToothList(tpType).then(response => {
        this.tpToothOptions = response.data;
      });
    },
    /** 选择的齿形 */
    tpToothChange(tpTooth) {
      console.log('选择的齿形:', tpTooth); // 在控制台输出选择的值
      this.chooseTpTooth = tpTooth;
      // 假如带宽下拉框有值，清空它
      this.tpBandwidthOptions = []; // 清空带宽选项
      this.queryParams.typeBandwidth = ''; // 清空带宽值
      this.chooseTpBandwidth = '带宽';


      // 假设齿数下拉框有值，清空它
      this.tpTeethNumOptions = []; // 清空齿数选项
      this.queryParams.typeTeethNum = ''; // 清空齿数值
      this.chooseTpTeethNum = '齿数';

      // 查询对应的齿数集合
      this.tpTeethNumList()

      this.timingPulleyFullNameMethod();

      /** 查询同步轮齿形对应的带宽集合 */
      getTpBandwidthList(tpTooth).then(response => {
        this.tpBandwidthOptions = response.data;
      });

    },
    /** 选择的同步轮带宽 */
    tpBandwidthChange(tpBandwidth) {
      console.log('选择的同步轮带宽:', tpBandwidth); // 在控制台输出选择的值
      this.chooseTpBandwidth = tpBandwidth;

      // 假设齿数下拉框有值，清空它
      this.tpTeethNumOptions = []; // 清空带宽选项
      this.queryParams.typeTeethNum = ''; // 清空带宽值

      // 查询对应的齿数集合
      this.tpTeethNumList()

      this.timingPulleyFullNameMethod();
    },
    /** 查询同步轮齿数集合 */
    tpTeethNumList() {
      if (this.chooseTpType && this.chooseTpMaterial && this.chooseTpTooth && this.chooseTpBandwidth) {
        // 如果chooseTpType和chooseTpMaterial都不为空，这里的代码会被执行
        var parameter = this.chooseTpType + '-' +
          this.chooseTpMaterial + '-' +
          this.chooseTpTooth + '-' +
          this.chooseTpBandwidth;

        console.log('查询同步轮齿数所需要的参数:', parameter);
        /** 查询同步轮齿形对应的带宽集合 */
        getTpTeethNumList(parameter).then(response => {
          this.tpTeethNumOptions = response.data;
        });
      }
    },
    /** 选择的同步轮齿数 */
    tpTeethNumChange(tpTeethNum) {
      console.log('选择的同步轮齿数:', tpTeethNum); // 在控制台输出选择的值
      this.chooseTpTeethNum = tpTeethNum;

      this.timingPulleyFullNameMethod();
    },
    /** 查询同步轮形状集合 */
    tpShapeList(tpType) {
      getTpShapeList(tpType).then(response => {
        this.tpShapeOptions = response.data;
      });
    },
    /** 选择的同步轮形状 */
    tpShapeChange(tpShape) {
      console.log('选择的同步轮形状:', tpShape); // 在控制台输出选择的值
      this.chooseTpShape = tpShape;

      // 假设轮轴孔类型下拉框有值，清空它
      this.tpAxleHoleTypeOptions = []; // 清空带宽选项
      this.queryParams.axleHoleType = ''; // 清空带宽值

      this.tpAxleHoleTypeList(this.chooseTpType, tpShape);

      this.timingPulleyFullNameMethod();
    },
    /** 查询同步轮轴孔类型集合 */
    tpAxleHoleTypeList(tpType, chooseTpShape) {
      getTpAxleHoleTypeList(tpType, chooseTpShape).then(response => {
        this.tpAxleHoleTypeOptions = response.data;
      });
    },
    /** 选择的同步轮轴孔类型 */
    tpAxleHoleTypeChange(tpAxleHoleType) {
      console.log('选择的同步轮轴孔类型:', tpAxleHoleType); // 在控制台输出选择的值
      this.chooseTpAxleHoleType = tpAxleHoleType;

      this.timingPulleyFullNameMethod();
    },
    /** 内孔直径文本框的值 */
    innerBoreDiameterKeyup(innerBoreDiameter) {
      this.tpInnerBoreDiameter = innerBoreDiameter;

      this.timingPulleyFullNameMethod();
    },
    /** 非标带宽A文本框的值 */
    typeAKeyup(typeA) {
      this.queryParams.typeA = typeA;
      // 不为空
      if (this.queryParams.timingPulley) {
        // 不含有中文
        if (!/[\u4e00-\u9fa5]/.test(this.queryParams.timingPulley)) {
          let split = this.queryParams.timingPulley.split('-');
          console.log("split : " + split)
          let count = (this.queryParams.timingPulley.split('-').length - 1);
          // '-' 符号大于等于 5，提前结束方法
          if (count >= 5) {
            if (this.isFormItemVisible) {
              let parameter = '';
              let slice = '';
              if (this.queryParams.timingPulley.includes('Z-')) {
                if (split[2].includes('H3M') ||
                  split[2].includes('H5M') ||
                  split[2].includes('H8M') ||
                  split[2].includes('S2M') ||
                  split[2].includes('S3M') ||
                  split[2].includes('S5M') ||
                  split[2].includes('S8M') ||
                  split[2].includes('MXL') ||
                  split[2].includes('T10')
                ) {
                  slice = split[2].slice(0, 3);
                } else if (split[2].includes('XL') || split[2].includes('T5')) {
                  slice = split[2].slice(0, 2);
                } else if (split[2].includes('L') || split[2].includes('H')) {
                  slice = split[2].slice(0, 1);
                }
                for (let i = 0; i < split.length; i++) {
                  if (i === 0) {
                    parameter = split[i];
                  } else if (i === 2) {
                    parameter = parameter + "-" + slice + "A" + this.queryParams.typeA;
                  } else {
                    parameter = parameter + "-" + split[i];
                  }
                }
                console.log("parameter : " + parameter);
                this.queryParams.timingPulley = parameter;
                return;
              }
            }
          }
        }
      }
      this.timingPulleyFullNameMethod();

    },
    /** 非标带宽L文本框的值 */
    typeLKeyup(typeL) {

    },

    /** 拼接所要进行搜索同步轮的全称 */
    timingPulleyFullNameMethod() {
      var parameter = '';
      if (this.queryParams.typeA) {
        parameter = 'Z-';
      }
      if (this.chooseTpType) {
        parameter = parameter + this.chooseTpType;
      } else {
        parameter = parameter + '类型';
      }
      if (this.chooseTpMaterial) {
        parameter = parameter + this.chooseTpMaterial.charAt(0);
      } else {
        parameter = parameter + '材质';
      }
      parameter = parameter + '-';
      if (this.chooseTpTooth) {
        parameter = parameter + this.chooseTpTooth;
      } else {
        parameter = parameter + '齿形';
      }

      if (this.queryParams.typeA) {
        parameter = parameter + 'A' + this.queryParams.typeA;
      } else {
        if (this.chooseTpBandwidth) {
          parameter = parameter + this.chooseTpBandwidth;
        } else {
          parameter = parameter + '带宽';
        }
      }

      parameter = parameter + '-';
      if (this.chooseTpTeethNum) {
        parameter = parameter + this.chooseTpTeethNum;
      } else {
        parameter = parameter + '齿数';
      }
      parameter = parameter + '-';
      if (this.chooseTpShape) {
        parameter = parameter + this.chooseTpShape.charAt(0);
      } else {
        parameter = parameter + '形状';
      }
      parameter = parameter + '-';
      if (this.chooseTpType === 'TP') {
        if (this.chooseTpAxleHoleType) {
          parameter = parameter + this.chooseTpAxleHoleType.charAt(0);
        } else {
          parameter = parameter + '轴孔类型';
        }
        parameter = parameter + '-';
        if (this.tpInnerBoreDiameter) {
          parameter = parameter + this.tpInnerBoreDiameter;
        } else {
          parameter = parameter + '内孔直径';
        }
      } else {
        if (this.chooseTpAxleHoleType) {
          parameter = parameter + this.chooseTpAxleHoleType;
        } else {
          parameter = parameter + '轴孔类型';
        }
      }

      this.queryParams.timingPulley = parameter;
      this.timingPulleyFullName = parameter;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        typeId: null,
        typeName: null,
        typeMaterial: null,
        typeToothShape: null,
        typeBandwidth: null,
        typeTeethNum: null,
        typeShape: null,
        axleHoleType: null,
        innerBoreDiameter: null
      };
      this.resetForm("form");
    },
    /** 查价按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if (this.queryParams.timingPulley) {
        var parameterData = {
          commodityCode: this.queryParams.timingPulley,
          bandwidthW: this.queryParams.typeW,
          bandwidthL: this.queryParams.typeL,
        }
        this.getTimingPulleyCostPrice(parameterData);
      } else {
        console.log("型号为空！不予查询！")
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
      this.queryParams.timingPulley = '';
      this.timingPulleyFullName = '';
      this.queryParams.typeA = '';
      this.queryParams.typeL = '';
    },
    /** 非标按钮操作 */
    nonstandard() {
      this.isFormItemVisible = !this.isFormItemVisible;
      this.isTypeBandwidth = !this.isFormItemVisible;
      this.queryParams.typeA = '';

      if (this.queryParams.timingPulley) {
        // 展开隐藏框
        if (this.isFormItemVisible) {
          if (!this.queryParams.timingPulley.includes('Z-')) {
            this.queryParams.timingPulley = 'Z-' + this.queryParams.timingPulley;
            this.timingPulleyFullName = this.queryParams.timingPulley;
          }
        }
        // 隐藏隐藏框
        else {
          this.queryParams.typeA = '';

          // 不为空
          if (this.queryParams && this.queryParams.timingPulley) {
            // 不含有中文
            if (!/[\u4e00-\u9fa5]/.test(this.queryParams.timingPulley)) {
              let count = (this.queryParams.timingPulley.split('-').length - 1);
              // '-' 符号大于等于 5，提前结束方法
              if (count >= 5) {
                if (!this.isFormItemVisible) {
                  if (this.queryParams.timingPulley.includes('Z-')) {
                    let lastTwoChars = this.queryParams.timingPulley.slice(2);
                    this.queryParams.timingPulley = lastTwoChars;
                    this.timingPulleyFullName = lastTwoChars;
                    return;
                  }
                }
              }
            }
          }
          this.timingPulleyFullNameMethod();
        }
      } else {
        console.log('this.queryParams or this.queryParams.timingPulley is not defined');
      }

    },
    /** 怡和达转换按钮操作 */
    yiHeDaConvert() {
      this.isFormYiHeDa = true;
      var yiHeDaTypeCommodity = this.queryParams.yiHeDaTypeCommodity;
      console.log('怡和达商品编码' + yiHeDaTypeCommodity);
      getYiHeDaTypeConvertWebsite(yiHeDaTypeCommodity).then(response => {
        console.log('转换后的怡和达商品编码' + response.data);
        this.queryParams.yiHeDaType = response.data;
      });
    },
    /** 米思米转换按钮操作 */
    miSiMiConvert() {
      this.isFormMiSiMi = true;
      var miSiMiTypeCommodity = this.queryParams.miSiMiTypeCommodity;
      console.log('米思米商品编码' + miSiMiTypeCommodity);
      getMiSiMiTypeConvertWebsite(miSiMiTypeCommodity).then(response => {
        console.log('转换后的米思米商品编码' + response.data);
        this.queryParams.miSiMiType = response.data;
      });
    },
    /** 爱安特转换按钮操作 */
    aiAnTeConvert() {
      this.isFormAiAnTe = true;
      var aiAnTeTypeCommodity = this.queryParams.aiAnTeTypeCommodity;
      console.log('爱安特商品编码' + aiAnTeTypeCommodity);
      getAiAnTeTypeConvertWebsite(aiAnTeTypeCommodity).then(response => {
        console.log('转换后的爱安特商品编码' + response.data);
        this.queryParams.aiAnTeType = response.data;
      });
    },
    /** 上隆转换按钮操作 */
    shangLongConvert() {
      this.isFormShangLong = true;
      var shangLongTypeCommodity = this.queryParams.shangLongTypeCommodity;
      console.log('上隆商品编码' + shangLongTypeCommodity);
      getShangLongTypeConvertWebsite(shangLongTypeCommodity).then(response => {
        console.log('转换后的上隆商品编码' + response.data);
        this.queryParams.shangLongType = response.data;
      });
    },
    // 型号转换
    transFormSkuNum() {
      this.isTransForm = true;
      const param = this.queryParams.AllTypeCommodity;
      console.log('输入转换前的型号' + param);
      GetTransFormSkuNumByValue(param).then(response => {
        console.log('------转换后的型号' + response.data);
        this.queryParams.afterTransformValue = response.data;
        this.queryParams.timingPulley = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.typeId != null) {
            updateType(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getTimingPulleyCostPrice();
            });
          } else {
            addType(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getTimingPulleyCostPrice();
            });
          }
        }
      });
    },
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
//顶部搜索模块
.searchWrap {
  label {
    background: #1890ff;
    color: white;
    text-align: center;
    padding: 0;
    min-width: 100px;
  }

  //搜索按钮组
  .searchOprationWrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
}


.priceTable {
  table {
    box-sizing: border-box;

    th {
      color: #333 !important;
      font-weight: bolder !important;
      text-align: center !important;
      border: 1px solid #ccc !important;
      max-width: 120px !important;
      //background: #fafafa!important;
      background: rgba(225, 243, 216, .35) !important;
    }

    td {
      border: 1px solid #ccc !important;
      color: #ff4949 !important;
      font-weight: 500 !important;
      //background: rgba(24,144,255,0.1)!important;
    }
  }

}

.extraOptionWrap {
  margin-top: 20px !important;
}

//分割线
.spliteLines {
  width: 100%;
  padding: 3px 0;
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
}

//标题
.el-descriptions__title {
  display: inline-block;
  padding: 10px 30px;
  background: #F56C6C;
  color: white;
  border-radius: 4px;
}

//转换表单
.customTitle {
  display: inline-block;
  padding: 10px 30px;
  background: #E6A23C;
  color: white;
  border-radius: 4px;
  margin: 20px 0;
}

.customFormGroup {
  width: 100%;
  display: flex;
  margin: 10px auto;
  align-items: center;
  flex-wrap: wrap;

  label {
    text-align: center;
    width: unset !important;
    padding: 0 10px;
  }

  button {
    margin-left: 10px;
  }
}

//预览图片
.perviewImageWrap {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.bossTitle {
  background: #1c84c6;
}

.userDescription {
  table {
    box-sizing: border-box;

    th {
      color: #333 !important;
      font-weight: bolder !important;
      text-align: center !important;
      border: 1px solid #ccc !important;
      max-width: 120px !important;
      background: rgba(51, 153, 255, .2) !important;
    }

    td {
      border: 1px solid #ccc !important;
      font-weight: 500 !important;
    }
  }
}
</style>
